<template>
  <div>
    <!-- 搜索条件 -->
    <el-form :inline="true" :model="queryList" class="demo-form-inline" style="margin:10px 0px 0px 10px">
      <el-form-item label="道具名称">
        <el-input v-model="queryList.propsName" clearable placeholder="道具名称"></el-input>
      </el-form-item>

      <el-form-item label="道具类型">
        <el-select v-model="queryList.type" clearable placeholder="请选择道具类型">
          <el-option label="功能道具" value="0"></el-option>
          <el-option label="材料道具" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="tableData.current=1,fetchData()">查询</el-button>
      </el-form-item>

      <a :href="'#/prop/addOrUpdateProp'"><el-button type="primary" >添加道具</el-button></a>
    </el-form>

    <!-- 列表数据 -->
     <el-table
      :data="tableData.list"
      border
      style="width: 100%">

      <el-table-column align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index +1 }}
        </template>
      </el-table-column>

      <el-table-column
        prop="propsName"
        align="center"
        label="道具名称">
      </el-table-column>

      <el-table-column
         prop="type"
         align="center"
         label="道具类型">
         <template slot-scope="scope">
           <span v-if="scope.row.type=='0'" >功能道具</span>
           <span v-if="scope.row.type=='1'" >材料道具</span>
         </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="道具图片">
        <template slot-scope="scope" class="demo-image__preview">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.propsAvatar"
               ></el-image>
        </template>
      </el-table-column>

      <el-table-column
        prop="description"
        label="道具介绍">
      </el-table-column>

      <el-table-column
        prop="level"
        width="120px"
        align="center"
        label="道具等级">
      </el-table-column>

       <el-table-column
         prop="property"
         width="120px"
         align="center"
         label="属性">
         <template slot-scope="scope">
           <span v-if="scope.row.property=='1'" >气血</span>
           <span v-if="scope.row.property=='2'" >速度</span>
         </template>
       </el-table-column>

       <el-table-column
         prop="propertyCount"
         align="center"
         label="属性增幅">
       </el-table-column>

      <el-table-column
        width="120px"
        label="操作">
        <template slot-scope="scope" >
            <a :href="'#/prop/addOrUpdateProp?id='+scope.row.id">
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
            </a>
            <el-button type="danger"  @click="deleteProp(scope.row.id)" icon="el-icon-delete" circle style="margin-left:10px"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="tableData.total"
      :page-size="tableData.limit"
      :current-page="tableData.current"
      @current-change="tableData.current=$event,fetchData()"
      >
    </el-pagination>

  </div>
</template>

<script>
import propApi  from '@/api/props'

export default {
  data() {
    return {
      //表格数据
      tableData: {
        total: 1000,
        current: 1,
        limit: 10,
        list: [

        ]
      },
      //查询条件
      queryList:{
        propsName: "",
        type: ""
      }

    }
  },
  created() {
    //获取表格数据
    this.fetchData()
  },
  methods: {
    //获取表格数据
    fetchData() {
      this.$loading = true
      propApi.getAllPropList(this.tableData.current,this.tableData.limit,this.queryList).then(res => {
          this.$loading = false;
          this.tableData.list = res.data.rows;
          this.tableData.total = res.data.total;

          console.log(this.tableData.total);
      }).catch(res => {
          this.$loading = false;
      })
    },

    //删除道具
    deleteProp(id){
        //提示框
        this.$confirm('是否删除该道具', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //执行删除
          propApi.deleteProps(id).then(res => {
            //执行后提示
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.fetchData()
        })
      }).catch(() => {
        //捕捉异常
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    }
  }
}
</script>
